import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col } from 'antd';
import {
  FirstHeaderC,
  SecondHeaderC,
  PrimaryC,
  InputC,
  InputNumberC,
  SelectC,
  SingleDateC,
  RangeDateC,
  SecuritiesCodeC,
  TradingCompanyC,
  ProductGroupTreeC,
  ProductListC,
} from '../../comps';

class AllFormTypeDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};

    setTimeout(() => {}, 5000);
  }

  render() {
    return (
      <Row style={{ padding: '20px' }}>
        <FirstHeaderC title='业务组件' />
        <SecondHeaderC title='SecuritiesCodeC' />
        <div style={{ width: '300px', border: '1px solid lightblue', marginBottom: '10px' }}>
          <SecuritiesCodeC form={this.props.form} dataIndex='securitiesCode1' titleDisplay={false} />
        </div>

        <SecondHeaderC title='TradingCompanyC' />
        <div style={{ width: '300px', border: '1px solid lightblue', marginBottom: '10px' }}>
          <TradingCompanyC form={this.props.form} dataIndex='tradingCompany1' title='' />
        </div>

        <SecondHeaderC title='ProductGroupTreeC' />
        <div style={{ width: '300px', border: '1px solid lightblue', marginBottom: '10px' }}>
          <ProductGroupTreeC form={this.props.form} dataIndex='productGroupTree1' title='' />
        </div>

        <SecondHeaderC title='ProductListC' />
        <div style={{ width: '300px', border: '1px solid lightblue', marginBottom: '10px' }}>
          <ProductListC form={this.props.form} dataIndex='productList1' title='' />
        </div>

        <FirstHeaderC title='通用组件' />
        <SecondHeaderC title='InputC' />
        <div style={{ width: '300px', border: '1px solid lightblue', marginBottom: '10px' }}>
          <InputC
            form={this.props.form}
            dataIndex='input1'
            onChange={(e) => {
              console.log(e.target.value);
            }}
            showALLValue={true}
          />
        </div>

        <SecondHeaderC title='InputNumberC' />
        <div style={{ width: '300px', border: '1px solid lightblue', marginBottom: '10px' }}>
          <InputNumberC form={this.props.form} dataIndex='inputNumber1' splitStyle={true} unit='H' />
        </div>
        <div style={{ width: '300px', border: '1px solid lightblue', marginBottom: '10px' }}>
          <InputNumberC form={this.props.form} dataIndex='inputNumber2' splitStyle={true} unit='元' />
        </div>

        <SecondHeaderC title='SelectC' />
        <div style={{ width: '300px', border: '1px solid lightblue', marginBottom: '10px' }}>
          <SelectC form={this.props.form} dataIndex='select1' />
        </div>

        <SecondHeaderC title='SingleDateC' />
        <div style={{ width: '300px', border: '1px solid lightblue', marginBottom: '10px' }}>
          <SingleDateC form={this.props.form} dataIndex='singleDate1' />
        </div>

        <SecondHeaderC title='RangeDateC' />
        <div style={{ width: '300px', border: '1px solid lightblue', marginBottom: '10px' }}>
          <RangeDateC form={this.props.form} dataIndex='rangeDate1' title='' />
        </div>
      </Row>
    );
  }
}

export default Form.create()(AllFormTypeDemo);
